/**首页 */
// 数据引入区
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
import React from 'react'
import './index.scss' // 首页样式

// action+state接口引入区域
// --------------------------------------------------------------------------------------------------------
import { add, sub } from './store/reducer' // redux中同步action方法
import { asynchronous } from './store/action' // redux中异步action方法

// redux全类型hooks引入
// --------------------------------------------------------------------------------------------------------
import { useAppDispatch, useAppSelector } from '@/utils/hooks'

import { useNavigate } from 'react-router-dom'

// 组件引入
// --------------------------------------------------------------------------------------------------------
import Table from '@/components/table/table'
import type { ColumnsType } from '@/components/table/table'

import Form from '@/components/form/form'
import type { formItems } from '@/components/form/form'

// TS定义区
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
interface Props { } // props传参接口

// 页面书写区
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const Index: React.FC<Props> = () => {
  const nav = useNavigate()
  // redux中hooks使用区域
  const index = useAppSelector((state) => state.index) // 获取本页面的index模块数据
  const dispatch = useAppDispatch() // 注册修改数据方法

  // 测试表格头部
  const head: ColumnsType<{
    name: string
    address: string
    key: React.Key
  }> = [
      {
        title: '姓名',
        dataIndex: 'name',
        width: '10%',
      },
      {
        title: '地址',
        dataIndex: 'address',
      },
    ]

  type Forms = [
    formItems<'input'>,
    formItems<'switch'>,
    formItems<'slider'>,
    formItems<'colorPicker'>
  ]

  const forms: Forms = [
    {
      type: 'input',
      name: 'input',
      required: true,
      label: 'input',
      itemconfig: {
        maxLength: 3,
        showCount: true,
        placeholder: '请输入',
      },
      rules: [{ required: true, message: '请输入' }],
    },
    {
      type: 'switch',
      name: 'switch',
      label: 'switch',
    },
    {
      type: 'slider',
      name: 'slider',
      label: 'slider',
    },
    {
      type: 'colorPicker',
      name: 'colorPicker',
      label: 'colorPicker',
    },
  ]

  // dom元素区域
  // ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
  return (
    <div className="Index">
      {/* 增加 */}
      <span
        onClick={() => {
          dispatch(add(2))
        }}
      >
        +
      </span>
      {/* 数据展示 */}
      {/* -------------------------------------------------------------------------------------------------------- */}
      数据是 {index.num}
      {/* 减少 */}
      {/* -------------------------------------------------------------------------------------------------------- */}
      <span
        onClick={() => {
          dispatch(sub(1))
        }}
      >
        -
      </span>
      {/* 异步相加 */}
      {/* -------------------------------------------------------------------------------------------------------- */}
      <span
        onClick={() => {
          dispatch(asynchronous(1))
        }}
      >
        异步相加
      </span>
      <div
        onClick={() => {
          nav('/404')
        }}
      >
        跳转
      </div>
      <Table head={head} apiQuery={{}} rowChangeType="checkbox" />
      <Form
        requiredMark={false}
        formitemlist={forms}
        formitemvalue={{
          input: 32,
        }}
        layout="inline"
        onFinish={(values) => {
          console.log(values)
        }}
        onFinishFailed={({ values, errorFields, outOfDate }) => {
          console.log(values, errorFields, outOfDate)
        }}
      />
    </div>
  )
}

// 导出首页
export default React.memo(Index)
